CSS

-size

В комплекте с «background-image» идут ещё несколько подсвойств, которые позволяют интересно работать с картинкой.

Во-первых, я вам обещал, что расскажу, как сделать так, чтобы картинка подстраивалась по размер блока. Наконец, настал момент, я сейчас это сделаю. 

Как видите, картинка обрезается и выходит за рамки нашего блока.

Чтобы такого не было, есть свойство «background-size» и ему задаём значение «cover».

.box{
  background-image:url(img/audi.png);
  background-size:cover;
}

Картинка, как видите, подстроилась.


Один небольшой нюанс. Это не значит, что если у вас картинка 2000х3000px, то её можно вставлять в блок 200х300px. Это не правильно. Опять же, как я говорил, лишние килобайты грузятся, и страница грузится, и не хорошо это. То есть это имеет смыл, если у вас блок 200х200px, а картинка, так получилось, 200х300px. То есть она где-то используется с размером 200х300px, а её ещё нужно вставить в блок 200х200px, тогда это имеет смысл. То есть расхождения должны быть не сильно большие. Повторюсь, не нужно вставлять очень большую картинку в очень маленькие блоки. Пожалуйста, обрезайте картинки до примерного хотя бы размера конечного блока. 

Собственно, вот так вот работает «background-size». На будущее скажу, что у большинства свойств есть ещё несколько дополнительных подствойств. Допустим у «background-size» есть «auto» и «contain». Они сейчас не имеют большого значения, либо они довольно-таки второстепенные  и редко используются, поэтому я на них внимание заострять не буду, ровно как и с другими свойствами, у которых есть не очень важные значения свойств. Я их просто буду описывать в текстовой документации к уроку, там они будут описаны и будет написано, что они делают, зачем они нужны, но в видео-уроках мы это особо разбирать не будем. Поэтому не удивляйтеся, если такое вдруг случилось. Если я про свойство не рассказал, значит оно второстепенное, не очень нужное и мы только заостряем внимание на первостепенных свойствах,  которые несут за собой самую главную мысль этого свойства. Короче, вы поняли, всё, давайте дальше.